<template>
  <el-container class="home-container">

    <!-- 主页头部 -->
    <el-header>
      <div class="logo">
        <div class="left">
          <img src="@/assets/image/logo_01.png">
          <h1>郑州市消防信息网</h1>
        </div>
        <div class="right">
          <div class="boxone">
            <span>对党忠诚</span>
            <span>纪律严明</span>
          </div>
          <div class="boxtwo">
            <span>赴汤蹈火</span>
            <span>竭诚为民</span>
          </div>
        </div>
      </div>
    </el-header>

    <!-- 主页导航栏 -->
    <el-row class="menu-wrapper">
      <el-menu mode="horizontal" background-color="rgb(64, 112, 186)" text-color="white" class="menu"
        active-text-color="#000000" :default-active="activeIndex" @select="handleSelect">
        <el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.id.toString()"
          @click="handleMenuItemClick(item)">
          {{ item.name }}
        </el-menu-item>
      </el-menu>

    </el-row>

    <!-- 时间 -->
    <el-row type="flex" justify="space-between" v-show="this.$route.path === '/home/index'" class="er1">
      <div class="welcome">
        <i class="el-icon-time" style="font-size: 20px"></i>&nbsp;
        <span> 今天是：{{ timeInfo.year }}年{{ timeInfo.month + 1 }}月{{ timeInfo.day }}日 </span>
        <span style="margin-left: 18px">周{{ week2 }} </span>
        <!--        <span style="margin-left: 18px">当前时间 {{ timeInfo.hours }}: {{ timeInfo.minutes }}: {{-->
        <!--            timeInfo.secondes-->
        <!--          }} </span>-->
      </div>
      <div class="generalService">
        <div class="zhpt cursor">
          综合业务平台
        </div>
        <div class="inputWrapper">
          <span>用户</span>
          <el-input />
        </div>
        <div class="inputWrapper">
          <span>密码</span>
          <el-input />
          <el-button type="primary" @click="login" class="eb1">登录</el-button>
        </div>
        <div class="inputWrapper2">
          <el-input prefix-icon="el-icon-search" placeholder="请输入要搜索的关键字" />
          <el-button type="primary" class="eb1">搜索</el-button>
        </div>
      </div>

    </el-row>


    <!-- 更变的内容区域 -->
    <el-main class="main">
      <router-view class="box"></router-view>
    </el-main>


    <el-footer>郑州市消防救援支队 邮编：450000 联系电话：xxxxxx</el-footer>
  </el-container>
</template>

<script>
import axios from 'axios'

export default {
  name: 'homePage',
  data() {
    return {
      activeIndex:'',
      timeInfo: {
        currentTime: '',
        year: '',
        month: '',
        day: '',
        week: '',
        hours: '',
        minutes: '',
        secondes: ''
      },
      menuList2: []
    }
  },
  created() {
  },
  mounted() {
    this.initTime()
    setInterval(this.initTime, 1000)
    let api3 = '/article/getAllPub'
    axios
      .post(api3,{
         page:1,
         pageSize:2
      })
      .then(res => {
        // console.log(res);
        console.log("res", res);
        this.menuList2 = res.data.data.records
      })
      .catch(error => {
        console.log(error)
      })
  },
  watch: {},
  computed: {
    week2() {
      if (this.timeInfo.week === 1) return '一'
      else if (this.timeInfo.week === 2) return '二'
      else if (this.timeInfo.week === 3) return '三'
      else if (this.timeInfo.week === 4) return '四'
      else if (this.timeInfo.week === 5) return '五'
      else if (this.timeInfo.week === 6) return '六'
      else return '日'
    },
    menuList() {
      return [
        { id: 1, name: "首页" },
        { id: 22, name: "消防要闻" },
        { id: 23, name: "机关动态" },
        { id: 24, name: "领导讲话" },
        { id: 25, name: "法律法规", link: "http://59.255.109.24:82/FLFGWeb/flfg.aspx" },
        { id: 26, name: "下载中心" },
        { id: 27, name: "新版消防监督系统", link: "http://example.com" },
        { id: 28, name: "视频点播" },
        { id: 29, name: "办公系统", link: "http://example.com" },
        { id: 30, name: "在线投稿" },
        { id: 31, name: "旧版入口", link: "http://example.com" },
      ];
    },
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
      localStorage.setItem("activeIndex", index); // 将选中的菜单项保存到 localStorage 中
    },
    menuLink(item) {
      if (item.link) {
        return item.link; // 直接返回外部链接  
      }
      switch (item.id) {
        case 1:
          return "/home";
        case 22:
          return "/home/firenews";
        case 23:
          return "/home/mechanismdynamivs";
        case 24:
          return "/home/leadertalk";
        case 25:
          return item.link;
        case 26:
          return "/home/download";
        case 27:
          return item.link;
        case 28:
          return "/home/viewpoint";
        case 29:
          return item.link;
        case 30:
          return "/home/onlinesubmit";
        case 31:
          return item.link;
        default:
          return `/${item.name.toLowerCase().replace(/\s+/g, '')}`;
      }
    },
    formatterTitle(t) {
      switch (t) {
        case '1':
          return 'index'
        case '22':
          return 'introduce'
        case '23':
          return 'zhengce'
        case '24':
          return 'keXieXiangMu'
        case '25':
          return 'xueShuJiaoLiu'
        case '26':
          return 'banShiZhiNan'
        case '27':
          return 'kePuFengCai'
        case '28':
          return 'xueXiaoShouYe'
        case '29':
          return 'telephone'
      }
    },
    handleMenuItemClick(item) {
      const link = this.menuLink(item);
      if (link.startsWith('http')) {
        // 如果是外部链接，则在新标签页中打开  
        window.open(link, '_blank');
      } else {
        // 如果是内部路由，则进行路由跳转（这里假设你使用了 Vue Router）  
        this.$router.push(link);
      }
    },
    // handleSelect(key) {
    //   console.log(key)
    //   if (key == '28') {
    //     window.open('https://www.pdsu.edu.cn/#')
    //   } else {
    //     this.$router.push({
    //       path: '/home/' + this.formatterTitle(key),
    //       query: {
    //         title: this.formatterTitle(key),
    //         id: key
    //       }
    //     })
    //   }
    // },
    // 初始化时间
    initTime() {
      this.timeInfo.currentTime = new Date()
      this.timeInfo.year = this.timeInfo.currentTime.getFullYear()
      this.timeInfo.month = this.timeInfo.currentTime.getMonth()
      this.timeInfo.day = this.timeInfo.currentTime.getDate()
      this.timeInfo.week = this.timeInfo.currentTime.getDay()
      this.timeInfo.hours = this.formattingTime(this.timeInfo.currentTime.getHours())
      this.timeInfo.minutes = this.formattingTime(this.timeInfo.currentTime.getMinutes())
      this.timeInfo.secondes = this.formattingTime(this.timeInfo.currentTime.getSeconds())
    },
    // 格式化时间——两位数
    formattingTime(val) {
      if (val < 10) {
        val = '0' + val
      }
      return val
    },
    login() {

      //验证用户名密码

      this.$router.push('/admin')
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}

.welcome {
  color: rgb(18, 102, 197);
  padding-left: 20px;
}

.el-header {
  height: 160px !important;
  //padding: 0 80px 0 120px;
  //border: red 1px solid;
  overflow: hidden;
  align-items: center;
  padding: 0;
  background: url("@/assets/image/bg_head.jpg") bottom;
}

.el-menu {
  width: 1300px;
  margin: 0 auto;

  .el-menu-item {
    //width: 150px;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
  }
}

.menu {
  display: flex;
  justify-content: space-between;
}

.menu-wrapper {
  background-color: rgb(64, 112, 186);
}

/* 设置选中菜单项的字体放大 */
.menu-wrapper .el-menu-item.is-active {
  font-size: 26px;
  /* 这里可以根据需求调整字体大小 */
  color: white !important;
  /* 保持选中菜单项的原始颜色 */
}

/* 隐藏默认的选中颜色 */
.menu-wrapper .el-menu-item.is-active {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* 设置菜单项文字颜色 */
.menu-wrapper .el-menu-item {
  color: white;
  /* 设置未选中的菜单项文字颜色 */
}

.el-footer {
  background-color: rgb(85, 81, 82);
}

.main {
  padding: 20px 5px;
  justify-content: center;
}

.el-footer {
  font-size: 15px;
  color: white;
  text-align: center;
  line-height: 60px;
}

.box {
  width: 1300px;
  margin: 0 auto;
}

.generalService {
  display: flex;
  justify-content: space-between;
  width: 900px;
  align-items: center;
}

.inputWrapper {
  display: flex;
  align-items: center;

}

.inputWrapper {
  span {
    white-space: nowrap;
    margin-right: 10px;
    font-size: 18px;
  }

  /deep/ .el-input__inner {
    background-color: rgba(248, 248, 160, 0.62);
    height: 30px;
    width: 120px;
    border-radius: 0;
  }
}

.inputWrapper2 {
  display: flex;
  align-items: center;

  /deep/ .el-input__inner {
    height: 30px;
    border-radius: 0;
  }

  /deep/ .el-input__icon {
    display: flex;
    align-items: center;
    font-size: 18px;
  }
}

.er1 {
  width: 1300px;
  height: 60px;
  align-items: center;
  margin: 0 auto;
}

.zhpt {
  font-weight: 600;
  color: #0a7ebb;
  font-size: 22px;
  margin-left: -50px;
  white-space: nowrap;
}

.eb1 {
  margin-left: 10px;
  height: 30px;
  display: flex;
  align-items: center;
  border-radius: 0;
}

.bg-head {
  width: 100%;
  height: 60%;
  object-fit: cover
}

.logo {
  width: 1300px;
  display: flex;
  margin: 30px auto 0;
  justify-content: space-between;
  /* 左右对齐 */
  align-items: center;
}

.logo .left {
  display: flex;
  align-items: center;
}

.logo .left h1 {
  padding-left: 2%;
  white-space: nowrap;
  color: #3c61ce;
  font-size: 60px;
  font-family: 楷体;
  font-weight: bolder;
}

.right span {
  font-size: 25px;
  font-family: "PingFang SC";
  font-weight: '500';
  color: red;
  margin-right: 20px;
  /* 调整每个 span 之间的右侧间距 */
}

.right .boxone {
  margin-bottom: 20px;
  opacity: 0;
  /* 初始时设置透明度为0 */
  animation: fadeIn 1.5s forwards;
  /* 应用动画 */
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  /* 开始时完全透明 */
  50% {
    opacity: 1;
  }

  /* 中间时完全不透明 */
  100% {
    opacity: 1;
  }

  /* 结束时保持不透明 */
}

.right .boxtwo {
  margin-left: 90px;
  opacity: 0;
  /* 初始时设置透明度为0 */
  animation: fadeIn 1s forwards;
  /* 应用动画 */
  animation-delay: 1s;
  /* 延迟0.5秒后开始动画 */
}


.no-underline {
  text-decoration: none;
}
</style>
